<template>
        <el-form
            ref="ruleFormRef"
            :model="ruleForm"
            status-icon
            :rules="rules"
            label-width="120px"
            class="demo-ruleForm"
        >
          <!--    prop必须绑定 你要校验元素的名字 -->
          <el-form-item label="账号" prop="account">
            <el-input
                style="flex: 3"
                v-model="ruleForm.account"
                type="text"
                autocomplete="off"
            />
            <el-select style="flex: 1;margin-left: 2px" v-model="ruleForm.loginType" class="m-2" placeholder="登入方式">
              <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
              />
            </el-select>
          </el-form-item>

          <el-form-item label="密码" prop="password">
            <el-input v-model="ruleForm.password" type="password" autocomplete="off" @keyup.enter.native="submitForm(ruleFormRef)"/>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="submitForm(ruleFormRef)"
            >登入
            </el-button
            >

            <el-button @click="resetForm(ruleFormRef)">清除</el-button>

            <!--使其单独向左-->
            <div style="margin-left: auto">
                <el-link style="margin-left: auto" :underline="false" type="danger" @click="forget">忘记密码？</el-link>
                <el-button  type="success"  @click="register1">注册</el-button>
            </div>
          </el-form-item>
        </el-form>
</template>

<script lang="ts" setup>
import {reactive, ref} from 'vue'
import {success, error} from '../../../utils/messageUtil'
import {login} from '../../../service/AccountApi'
import {useRouter} from "vue-router";
import {save} from "../../../utils/constant";
import {FormInstance} from "element-plus";


const router = useRouter();

const ruleFormRef = ref<FormInstance>()

const options = [
  {
    value: 'Email',
    label: '邮箱登入',
  },
  {
    value: 'Account',
    label: '账号登入',
  },];

const forget = ()=>{
  router.push({
    name:'forget'
  })
}

const register1 = ()=>{
  router.push({
    name:'registration'
  })
}

const validatePass = (rule: any, value: any, callback: any) => {
  if (value === '') {
    callback(new Error('密码不能为空'))
  } else {
    callback()
  }
}

const validateAccount = (rule: any, value: any, callback: any) => {
  if (value === '') {
    callback(new Error("账号不能为空"))
  } else {
    callback()
  }
}

const ruleForm = reactive({
  account: '',
  password: '',
  loginType: 'Account',
})

const rules = reactive({
  account: [{validator: validateAccount, trigger: 'blur'}],
  password: [{validator: validatePass, trigger: 'blur'}],
})

const submitForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.validate((valid) => {
    if (valid) {
      login(ruleForm).then((d) => {
        if (d.data.code === '200') {
          console.log(d.data.date)
          success('登入成功!')
          //保存信息
          save(d.data.date.token, JSON.stringify(d.data.date.userVo), d.data.date.keepConnection)
          //跳转路由
          router.push({
            path: '/'
          })
        } else {
          error(d.data.message)
        }
      }).catch((e) => {

        console.log(e)
        error("调用错误")

      })
    } else {
      error('请检查参数')
      return false
    }
  })
}

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  //清除所有东西
  formEl.resetFields()
}
</script>

<style scoped>

.el-form{
  width: 600px;
  margin: 0 auto;
}

</style>